<template>
	<div>
		<el-drawer size="70%" title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info drawer-infoppp">
			<div class="info-item">
				<h5 class="from-title">基本信息</h5>
				<div class="form-item">
					<label class="form-item-label">发送人:</label>
					<div class="form-item-content">{{ objInfo.sender }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">接收人:</label>
					<div class="form-item-content">{{ objInfo.toUser }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">抄送人:</label>
					<div class="form-item-content">{{ objInfo.toCuser }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">发送时间:</label>
					<div class="form-item-content">{{ objInfo.sendTime }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">邮件标题:</label>
					<div class="form-item-content">{{ objInfo.emailTitle }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">邮件内容:</label>
					<div class="form-item-content"><p v-html="objInfo.emailBody" v-if="objInfo.emailBody"></p></div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { castlemessageemailrecordInfo } from "@/api/message/mail/castlemessageemailrecord.js"

export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
		}
	},
	created() {},
	methods: {
		init(id) {
			if (id) {
				castlemessageemailrecordInfo(id).then(res => {
					this.objInfo = res.data
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>
<style scoped>
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	margin-bottom: 40px;
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 80px !important;
}
.form-item-content {
	margin-left: 80px;
	width: calc(100% - 80px) !important;
}
</style>
<style lang="scss">
.drawer-infoppp {
	width: 60% !important;
}
</style>
